<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${classObj.className} + ' 的课程管理 - 企业培训平台'">班级课程管理</title>
    <style>
        /* --- Global Layout & Variables (Consistent with other pages) --- */
        :root {
            --sidebar-width: 240px;
            --primary-color: #007bff;
            --secondary-color: #6c757d;
            --danger-color: #dc3545;
            --info-color: #17a2b8;
            --light-gray: #f8f9fa;
            --border-color: #dee2e6;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f4f5f7;
            margin: 0;
            color: #333;
        }
        .main-content {
            margin-left: var(--sidebar-width); /* Fixes overlap with sidebar */
            padding: 30px;
        }
        .container-card {
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            padding: 25px 30px;
        }
        /* --- Page Header --- */
        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
        }
        .page-header h1 {
            margin: 0;
            font-size: 1.8em;
        }
        .section-header {
            margin: 30px 0 15px 0;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border-color);
            font-size: 1.3em;
        }
        /* --- Class Info Box --- */
        .class-info {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
            padding: 20px;
            background-color: #e9ecef;
            border-left: 5px solid var(--primary-color);
            border-radius: 0 8px 8px 0;
            margin-bottom: 25px;
        }
        .class-info p { margin: 0; font-size: 1em; color: #495057; }
        .class-info p strong { font-weight: 600; color: #343a40; }

        /* --- Add Course Form --- */
        .add-course-form {
            display: flex;
            gap: 10px;
            align-items: center;
        }
        .add-course-form .form-group {
            flex-grow: 1;
        }
        .add-course-form label { display: none; }
        .add-course-form select {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-size: 1em;
        }
        /* --- Table Styles --- */
        .table {
            width: 100%; border-collapse: collapse; font-size: 0.95em;
        }
        .table th, .table td {
            padding: 12px 15px; text-align: left; vertical-align: middle;
            border-bottom: 1px solid var(--border-color);
        }
        .table thead th {
            background-color: var(--light-gray); font-weight: 600; color: #495057;
        }
        .table tbody tr:hover { background-color: #e9ecef; }
        .course-cover-thumbnail { width: 80px; height: 45px; object-fit: cover; border-radius: 4px; }
        .table-actions { display: flex; gap: 8px; }
        .table-actions form { margin: 0; }

        /* --- Button Styles --- */
        .btn {
            display: inline-block; font-weight: 500; text-align: center; cursor: pointer;
            border: 1px solid transparent; padding: 8px 15px; font-size: 0.9em;
            border-radius: 4px; transition: all 0.2s ease-in-out; text-decoration: none; color: #fff;
        }
        .btn:hover { filter: brightness(90%); }
        .btn-primary { background-color: var(--primary-color); }
        .btn-secondary { background-color: var(--secondary-color); }
        .btn-danger { background-color: var(--danger-color); }
        .btn-info { background-color: var(--info-color); }

        .no-content-message {
            text-align: center; padding: 40px; color: #666;
            background-color: #fafafa; border: 1px dashed #ccc; border-radius: 8px;
        }
    </style>
</head>
<body>
<div th:replace="~{fragments/header :: header}"></div>

<div class="main-content">
    <div class="container-card">
        <div class="page-header">
            <h1 th:text="${classObj.className} + ' - 课程管理'"></h1>
            <a th:href="@{/class/manage}" class="btn btn-secondary">返回班级列表</a>
        </div>

        <div class="class-info">
            <p><strong>班级ID:</strong> <span th:text="${classObj.id}"></span></p>
            <p><strong>班级名称:</strong> <span th:text="${classObj.className}"></span></p>
            <p><strong>教师ID:</strong> <span th:text="${classObj.teaId}"></span></p>
            <p><strong>学生数量:</strong> <span th:text="${classObj.classStuNum}"></span></p>
            <p><strong>课程数量:</strong> <span th:text="${classObj.classCouNum}"></span></p>
        </div>

        <h3 class="section-header">向班级添加新课程</h3>
        <div class="add-course-form">
            <form th:action="@{/class/{classId}/add-course-to-class(classId=${classObj.id})}" method="post" style="display: flex; gap: 10px; width: 100%; max-width: 500px;">
                <div class="form-group" style="flex-grow: 1;">
                    <label for="courseSelect">选择课程:</label>
                    <select id="courseSelect" name="courseId" required>
                        <option value="">-- 从可用课程中选择 --</option>
                        <option th:each="course : ${coursesToAdd}"
                                th:value="${course.id}"
                                th:text="${course.couName}"></option>
                    </select>
                </div>
                <button type="submit" class="btn btn-primary">添加</button>
            </form>
        </div>

        <h3 class="section-header">班级内已有课程</h3>
        <div th:if="${!#lists.isEmpty(classCourses)}" class="table-responsive">
            <table class="table">
                <thead>
                <tr>
                    <th>ID</th> <th>课程名称</th> <th>封面</th>
                    <th>价格</th> <th>章节数</th> <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="course : ${classCourses}">
                    <td th:text="${course.id}"></td>
                    <td class="course-name" th:text="${course.couName}"></td>
                    <td>
                        <img th:src="${course.couPic != null and course.couPic != '' ? course.couPic : 'https://placehold.co/80x45/e9ecef/6c757d?text=No+Image'}"
                             onerror="this.onerror=null;this.src='https://placehold.co/80x45/e9ecef/6c757d?text=No+Image';"
                             alt="课程封面" class="course-cover-thumbnail">
                    </td>
                    <td th:text="${course.couPrice != null ? course.couPrice : '0'}"></td>
                    <td th:text="${course.couCataNum != null ? course.couCataNum : '0'}"></td>
                    <td class="table-actions">
                        <a th:href="@{/course/detail/{id}(id=${course.id})}" class="btn btn-info">详情</a>
                        <form class="remove-form" th:action="@{/class/{classId}/courses/delete/{courseId}(classId=${classObj.id}, courseId=${course.id})}" method="post">
                            <button type="submit" class="btn btn-danger">移除</button>
                        </form>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div th:if="${#lists.isEmpty(classCourses)}" class="no-content-message">
            <p>该班级目前没有关联任何课程。</p>
        </div>
    </div>
</div>

<script>
    // Enhanced confirmation dialog for removing a course
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('.remove-form').forEach(form => {
            form.addEventListener('submit', function(event) {
                const row = form.closest('tr');
                const courseName = row.querySelector('.course-name').innerText;
                if (!confirm(`您确定要将课程 “${courseName}” 从班级中移除吗？`)) {
                    event.preventDefault(); // Stop form submission if user clicks 'Cancel'
                }
            });
        });
    });
</script>

</body>
</html>